<template>
	<view class="page">
		
		<view class="head">
			<view class="head1">
			
				<text class="nav-title">另品网</text>
				
			</view>
			<view class="head-info">
				<!-- 搜索 -->
				<view class="head-search">
					<view class="icon-info" >
						<text class="iconfont icon-dingwei"></text>
						<view class="dingwei">红山区</view>
					</view>
					<view class="search" @click="onSearch">
						<view class="icon">
							<text class="iconfont icon-sousuo"></text>
						</view>
						<view class="hint">
							
							
						</view>
					</view>
				
				</view>
				
			</view>
		</view>
		
    <mescroll-body ref="mescrollRef"
                   @down="downCallback"
                   @up="upCallback"
                   :down="downOption"
                   :up="upOption"
                   :top="0">
		<view class="main" v-show="classifyShow===0">
			<!-- 菜单导航 -->
			
				<view class="menu-nav">
					<view class="nav-list">
						<view class="nav" ref="nav" :style="navList.length<=4?'flex-direction:row':''">
							<view class="list" v-for="(item,index) in navList"
							@click="onTab(item)"
							:key="index">
								<image :src="'/static/home/' + (1 + index) + '.png'" mode=""></image>
								<text>{{item.name}}</text>
							</view>
						</view>
					</view>
					
				</view>
				
			<!-- 通知 -->
			<view class="inform" >
				<view class="inform-info">
					
					<view class="picture">
						<image src="../../static/news.jpg" mode=""></image>
						<!-- <view class="picture1">
							最新
						</view>
						<view class="picture2">
							消息
						</view> -->
					</view>
					<view class="info">
						<swiper class="swiper" :circular="true" :vertical="true" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
							<swiper-item>
								<view class="swiper-item" @click="onSkip('inform')">
									<text class="one-omit">何*** 理刚刚通过推广赚了100积分</text>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item" @click="onSkip('inform')">
									<text class="one-omit">张*** 理刚刚通过推广赚了200积分</text>
								</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item" @click="onSkip('inform')">
									<text class="one-omit">郑*** 理刚刚通过推广赚了80积分</text>
								</view>
							</swiper-item>
						</swiper>
					</view>
					<view class="button" @click="notice">
						查看
					</view>
				</view>
			</view>
			<view class="title">
				热门榜单
			</view>
			<!-- banner -->
			<view class="banner">
				<swiper class="screen-swiper square-dot" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500">
					<swiper-item v-for="(item,index) in swiperList" :key="index">
						<image :src="item.url" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商家 -->
			<view class="title">
				今日推荐
			</view>
			<view class="content">
				<view class="business" v-for="(item,index) in recommendList" :key="index" @click="store(item)" >
					<view class="businessLeft">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="businessRight" >
						<view class="top">
							{{item.name}}
						</view>
						<view class="center">
							{{item.introduce}}
						</view>
						<view class="bottom">
							
							<view class="phone">
								<text class="iconfont icon-dianhua"></text>
								<view class="number">{{ hidePhone(item.phone) }}</view>
							
							</view>
							<view class="left">
								<view class="icon-info" >
									<text class="iconfont icon-dingwei"></text>
									<view class="dingwei">导航</view>
								</view>
								<view class="">
									{{item.distance}}
								</view>
								<text class="padding">|</text>
								<view class="">
									{{item.region}}
								</view>
							</view>
						</view>	
					</view>
				</view>
			</view>
			
			<!-- banner -->
			<view class="image">
				<image src="/static/img/banner_01.png" mode="aspectFill"></image>
			</view>
			<!-- 商家 -->
			<view class="title">
					新品推荐
			</view>
			<view class="content">
				<view class="business" v-for="(item,index) in newsList" :key="index" @click="store(item)" >
					<view class="businessLeft">
						<image :src="item.img" mode=""></image>
					</view>
					<view class="businessRight" >
						<view class="top">
							{{item.name}}
						</view>
						<view class="center">
						{{item.introduce}}						
						</view>
						<view class="bottom">
							
							<view class="phone">
								<text class="iconfont icon-dianhua"></text>
								<view class="number">{{ hidePhone(item.phone) }}</view>							
							</view>
							<view class="left">
								<view class="icon-info" >
									<text class="iconfont icon-dingwei"></text>
									<view class="dingwei">导航</view>
								</view>
								<view class="">
									{{item.distance}}
								</view>
								<text class="padding">|</text>
								<view class="">
									{{item.region}}
								</view>
							</view>
						</view>	
					</view>
				</view>
			</view>
			
		</view>
    </mescroll-body>
    
		<!-- tabbar -->
		<TabBar :tabBarShow="0"></TabBar>
	</view>
</template>

<script>
import TabBar from '../../components/TabBar/TabBar.vue';

// 引入mescroll-mixins.js
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins: [MescrollMixin], // 使用mixin
	components:{
		TabBar,
		
		},
	data(){
		return{
      mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
      // 下拉刷新的配置(可选, 绝大部分情况无需配置)
      downOption: {},
      // 上拉加载的配置(可选, 绝大部分情况无需配置)
      upOption: {
        use: false
      },
	  
	     
			swiperList: [
				{
					id: 0,
					type: 'image',
					url: '/static/img/banner_01.png',
				},
				{
					id: 1,
					type: 'image',
					url: '/static/img/banner_02.png',
				},
				{
					id: 2,
					type: 'image',
					url: '/static/img/banner_03.png',
				},
				{
					id: 3,
					type: 'image',
					url: '/static/img/banner_04.png',
				},
				
			],
			slideNum: 0,
			recommendList:[
				{
					img:'https://img1.qunarzz.com/travel/poi/1409/10/a06dfdfc7dbc8814ffffffffc8d65eac.jpg',
					name:'众联广场',
					introduce:'赤峰众联广场是位于中国内蒙古自治区赤峰市的一个商业综合体。广场的设计融合了现代化商业、休闲、娱乐及办公功能，是该地区的一个重要地标。该广场内有多家品牌店铺、餐饮、娱乐设施等，是当地居民和游客常去的消费和休闲场所。',
					distance:'1.6km',
					region:'众联广场(玉龙大街店)',
					phone:'13025698989',
					detail:{
						img:'https://img1.qunarzz.com/travel/poi/1409/10/a06dfdfc7dbc8814ffffffffc8d65eac.jpg',
						name:'众联广场',
						time:'10:00-21：00',
						phone:'(0476)8282000',
						price:0,
						location:'松山区-玉龙大街与天义路交叉口',
						distance:'1.6km',
						singleList:[
							{
								img:'https://webmap0.bdimg.com/client/services/thumbnails?width=132&height=104&align=center,center&quality=100&src=https%3A%2F%2Fqcloud.dpfile.com%2Fpc%2FMLcUItjXwjSY9e1ThBq1wj6eplLo4vfzG-mFhLTh0EI32iHpQfqTt42Nj-6Xj6n-dFjgoLVd054K0OQFUj8KpVEuLYk00OmSS1IdNpm8K8sG4JN9RIm2mTKcbLtc2o2vfCF2ubeXzk49OsGrXt_KYDCngOyCwZK-s3fqawWswzk.jpg',
								title:'一牧草原(众联广场店)'
							},
							{
								img:'https://webmap0.bdimg.com/client/services/thumbnails?width=132&height=104&align=center,center&quality=100&src=https%3A%2F%2Fpoi-pic.cdn.bcebos.com%2Fswd%2Fc95dacc4-128e-32c4-a029-29c2c3d93832.jpg',
								title:'幸运咖(众联广场店)'
							},
							{
								img:'https://webmap0.bdimg.com/client/services/thumbnails?width=132&height=104&align=center,center&quality=100&src=https%3A%2F%2Fpoi-pic.cdn.bcebos.com%2Fswd%2F0bcae6dd-7f7f-3ca6-a4c9-662f433d3f2f.jpg',
								title:'德克士(众联广场店)'
							},
							{
								img:'https://webmap0.bdimg.com/client/services/thumbnails?width=132&height=104&align=center,center&quality=100&src=https%3A%2F%2Fpoi-pic.cdn.bcebos.com%2Fswd%2F28a1b2ce-de00-3b51-afb7-d02a1beaca28.jpg',
								title:'星巴克(众联广场店)'
							},
							{
								img:'https://webmap0.bdimg.com/client/services/thumbnails?width=132&height=104&align=center,center&quality=100&src=https%3A%2F%2Fpoi-pic.cdn.bcebos.com%2Fswd%2F7e70dd9c-064d-338c-9c40-bc6eeb1a46e6.jpg',
								title:'阿迪达斯(玉龙大街众联广场店)'
							},
							
						]
					}
				},
				{
					img:'https://qcloud.dpfile.com/pc/y7ftpdamyc_as4T7T2rDOhb_yIvqXjmFTEZUO6wG1ZmGKaGJ_Q8DOLY49LEQpUX3tinsm4wZBU2JBzCyrLLxBw.webp',
					name:'富贵鸟男装',
					introduce:'富贵鸟男装以"时尚、舒适、品质"为品牌理念，持续为消费者提供具有设计感、质量保障的服饰选择。',
					distance:'1.6km',
					region:'众联广场(玉龙大街店)',
					phone:'13025698989',
					detail:{
						img:'https://qcloud.dpfile.com/pc/y7ftpdamyc_as4T7T2rDOhb_yIvqXjmFTEZUO6wG1ZmGKaGJ_Q8DOLY49LEQpUX3tinsm4wZBU2JBzCyrLLxBw.webp',
						name:'富贵鸟男装',
						time:'10:00-21：00',
						phone:'16958963322',
						price:0,
						location:'松山区-玉龙大街与天义路交叉口',
						distance:'1.6km',
						singleList:[
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.mtHLTg3el72M-rwqMjHOjwHaE8?w=296&h=197&c=7&r=0&o=5&pid=1.7',
								title:'富贵鸟衬衫'
							},
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.on0FL6XUqKVnVZmeuasbzwHaFM?w=281&h=197&c=7&r=0&o=5&pid=1.7',
								title:'富贵鸟T恤'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.vA8RzXQJi8KXTwYjNYUSMQHaE8?w=296&h=197&c=7&r=0&o=5&pid=1.7',
								title:'富贵鸟西装'
							},
							{
								img:'',
								title:'富贵鸟风衣'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.W9WCxAJ3vRJK7yjfB5oJigHaHa?w=189&h=189&c=7&r=0&o=5&pid=1.7',
								title:'富贵鸟休闲'
							},
							
						]
					}
				},
				{
					img:'https://poi-pic.cdn.bcebos.com/hotel/images/toutu/1/pics_d740813cc5ae6864e77923b7f273775f.jpg?x-bce-process=image/resize,m_lfit,w_2160,h_1080/quality,q_70',
					name:'金帝酒店',
					introduce:'金帝酒店（Golden Emperor Hotel）通常是指中国各地一些高端酒店的名称，因此具体的酒店介绍可能会有所不同。不过，一般来说，这类酒店通常会提供优质的服务、设施和客房，适合商务和休闲游客。',
					distance:'5.6km',
					region:'玉龙大街金帝大厦C座',
					phone:'17025698989',
					detail:{
						img:'https://poi-pic.cdn.bcebos.com/hotel/images/toutu/1/pics_d740813cc5ae6864e77923b7f273775f.jpg?x-bce-process=image/resize,m_lfit,w_2160,h_1080/quality,q_70',
						name:'金帝酒店',
						time:'10:00-21：00',
						phone:'17025698989',
						price:202,
						location:'玉龙大街金帝大厦C座',
						distance:'5.9km',
						singleList:[
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.MDEd_E60jQYQ0zXEa2vnQQHaEK?w=271&h=180&c=7&r=0&o=5&pid=1.7',
								title:'客房'
							},
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.S4SF92m1niu_hZyg6yNnmAHaEC?w=271&h=180&c=7&r=0&o=5&pid=1.7',
								title:'大床房'
							},
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.-zGwmUMCBw5ETiLLM1Y97gHaEk?w=275&h=180&c=7&r=0&o=5&pid=1.7',
								title:'大床房'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.jLLYQ0UGA-1GXRaONtyGJQHaE8?w=248&h=180&c=7&r=0&o=5&pid=1.7',
								title:'卧房'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.JT0oTIhvI39EKOpbcD39HQHaEK?w=315&h=180&c=7&r=0&o=5&pid=1.7',
								title:'标间'
							},
							
						]
					}
				},
			],
			newsList:[
				{
					img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.9xIg1UKPjTJMj_N6cwYNKwHaJN?w=156&h=180&c=7&r=0&o=5&pid=1.7',
					name:'青椒牛肉包子',
					introduce:'李与白包子铺是一家具有地方特色和文化底蕴的包子店，以其美味的包子、优质的食材和热情的服务赢得了广泛的赞誉。它的包子凭借精湛的制作工艺和细致的口味设计，成为了不少食客的首选。',
					distance:'59km',
					region:'长青街道店',
					phone:'13325698989',
					detail:{
						img:'',
						name:'李与白包子铺',
						time:'10:00-21：00',
						phone:'(0476)8282000',
						price:0,
						location:'红山区-长青街道店',
						distance:'59m',
						singleList:[
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.UtTxbvSrp44sgVcJoTdFzwHaEk?w=282&h=180&c=7&r=0&o=5&pid=1.7',
								title:'牛肉面'
							},
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.JpeCGVYHhqmO7GOv_aH8cwAAAA?w=174&h=180&c=7&r=0&o=5&pid=1.7',
								title:'香菇包'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.m40Qc0ztjQ3kEYfhLlJJYQHaFj?w=226&h=180&c=7&r=0&o=5&pid=1.7',
								title:'鸡蛋面'
							},
							{
								img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.qOMos2ymE2YqAITGTYrOzAHaFj?w=217&h=180&c=7&r=0&o=5&pid=1.7',
								title:'成都酱肉包'
							},
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.oEvfiEZ7Cvd4FqkykPAAHAHaHl?w=163&h=184&c=7&r=0&o=5&pid=1.7',
								title:'砂锅面'
							},
							
						]
					}
				},
				{
					img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.a0_sTRW_R1OIWM-9T8DR7QHaE7?w=274&h=183&c=7&r=0&o=5&pid=1.7',
					name:'海鲜粥',
					introduce:'三米粥铺凭借其丰富多样的粥品、健康的饮食理念以及舒适的就餐环境，成为许多人日常饮食中的首选之一。它注重提供美味与营养兼顾的食品，是现代都市生活中一个温暖的用餐选择。',
					distance:'1.6km',
					region:'赤峰店',
					phone:'13025698989',
					detail:{
						img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.Ys5CMXUkC_KshGFvOkNk_AHaE6?w=277&h=183&c=7&r=0&o=5&pid=1.7',
						name:'三米粥铺',
						time:'10:00-23：00',
						phone:'16958963322',
						price:0,
						location:'红山区-玉龙大街与天义路交叉口',
						distance:'16km',
						singleList:[
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.G_GwnWJ84WDRDX-i7DvcKQHaHa?w=191&h=184&c=7&r=0&o=5&pid=1.7',
								title:'皮蛋瘦肉粥'
							},
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.0qu6ybCsbxA7UoTAOwbbWgHaE8?w=291&h=194&c=7&r=0&o=5&pid=1.7',
								title:'敖汉黄米粥'
							},
							{
								img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.ME3qPoyOIRd-0pYVEEHz7AHaFj?w=261&h=196&c=7&r=0&o=5&pid=1.7',
								title:'香酥油条'
							},
							{
								img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.FD2QbO6mAFk_3g7237VmTwHaHa?w=202&h=202&c=7&r=0&o=5&pid=1.7',
								title:'香甜豆浆'
							},
							{
								img:'https://tse1-mm.cn.bing.net/th/id/OIP-C.4gJ8wU_rpLeOOxrSK9vSpwHaHa?w=185&h=184&c=7&r=0&o=5&pid=1.7',
								title:'鲜肉小馄饨'
							},
							
						]
					}
				},
				{
					img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.ZN9JkUGPgY3uUJmLClP6_wHaKe?w=199&h=281&c=7&r=0&o=5&pid=1.7',
					name:'草莓桃桃乐',
					introduce:'沪上阿姨是一个充满活力的现代饮品品牌，凭借创新的饮品、优质的原料和贴心的服务赢得了广大消费者的喜爱。无论是传统奶茶爱好者，还是喜欢尝试新口味的顾客，都能在沪上阿姨找到适合自己的饮品',
					distance:'7.6m',
					region:'红山区步行街',
					phone:'17025698989',
					detail:{
						img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.Ed07h6jKxP9UL--yrkjCCAHaFK?w=199&h=138&c=7&r=0&o=5&pid=1.7',
						name:'沪上阿姨鲜果茶',
						time:'10:00-21：00',
						phone:'17025698989',
						price:0,
						location:'红山区步行街',
						distance:'7.6m',
						singleList:[
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.bd3hq7grql2LM_wfixqwegHaJ4?w=199&h=265&c=7&r=0&o=5&pid=1.7',
								title:'黯夜玫瑰'
							},
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.AOjtLCTFqaS-fLmnkVN4CwHaJ4?w=199&h=265&c=7&r=0&o=5&pid=1.7',
								title:'杨枝甘露'
							},
							{
								img:'https://tse3-mm.cn.bing.net/th/id/OIP-C.JRLI8Cj0gcohxAvEyapobgHaJ4?w=156&h=180&c=7&r=0&o=5&pid=1.7',
								title:'茉莉奶绿'
							},
							{
								img:'https://tse4-mm.cn.bing.net/th/id/OIP-C.a4gpPv-kHM-gDcbaFNwdfwHaKd?w=156&h=180&c=7&r=0&o=5&pid=1.7',
								title:'薄荷奶绿'
							},
							{
								img:'https://tse2-mm.cn.bing.net/th/id/OIP-C.MWVITev9sk0QX3J_NEGLFQHaKn?w=153&h=180&c=7&r=0&o=5&pid=1.7',
								title:'多肉樱桃'
							},
							
						]
					}
				},
			],
			navList: [
				{
					id: 1,
					name: '今日推荐',
					path:'/moduleC/pages/recommendation/index',
				},{
					id: 2,
					name: '新品推荐',
					path:'/moduleA/new/index',
				},{
					id: 3,
					name: '行业分类',
					path:'/moduleA/recommendation/class/index',
				},{
					id: 4,
					name: '平台商城',
					// path:'/moduleA/setted/index',
				},
				{
					id: 5,
					name: '商家入驻',
					path:'/moduleA/setted/index',
				},
			],
		
			classifyShow: 0,
			// 页面高度
			pageHeight: 500,
		}
	},
	onReady() {
		uni.hideTabBar();
		// #ifdef MP
		uni.setNavigationBarTitle({
			title: '首页',
		})
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#33CAA5',
			opacity: 0.36,
		})
		// #endif
	},
	onLoad() {

	},
	onPageScroll(e){
		let scrollTop = e.scrollTop;
		if(scrollTop > 0){
			this.pageHeight = 210;
		}else{
			this.pageHeight = 500;
		}
	},
  onReachBottom(){
    console.log(12333);
  },
  
	methods:{
    /*下拉刷新的回调, 有三种处理方式:*/
    downCallback(){
		setTimeout(() =>{
		 this.mescroll.endSuccess();
		},2000)
      
    },
    /*上拉加载的回调*/
    upCallback(page) {
      setTimeout(() =>{
        this.mescroll.endByPage(10, 20);
      },2000)
    },
		notice(){
			uni.navigateTo({
				url:'/moduleA/notice/index'
			})
		},
		/**
		 * 搜索点击
		 */
		onSearch(){
			uni.navigateTo({url:'/pages/search/search'})
			
		},
		
		  hidePhone(phone) {
		    return phone.replace(/(\d{3})\d{4}(\d{4})/, '\$1****\$2');
		  },
	

	
		
		
		/**
		 * 跳转点击
		 * @param {String} type 跳转类型
		 */
		onTab(item){
			if(item.id===4){
				  uni.showToast({
				          title: '该功能正在开发中，敬请期待！',
				          icon: 'none',
				          duration: 2000
				        });
				        return; 
			}
			 uni.navigateTo({
			      url: item.path // 跳转到相应的页面
				
			    });
		},
		// store(item){
		// 	  uni.setStorageSync('itemDetail', item.detail);
		// 	uni.navigateTo({
		// 		url:'/moduleA/recommendation/store/index'
		// 	})
		// },
		store(item) {
		  // Storing the item detail in local storage
		  uni.setStorageSync('itemDetail', item.detail);
		  
		  // Navigating to the store page, passing the name of the detail object
		  uni.navigateTo({
		    url: `/moduleA/recommendation/store/index?detail=item.detail`
		  });
		},

		onSkip(type){
			switch (type){
				case 'mess':
					uni.navigateTo({
						url: '/pages/Message/Message'
					})
					break;
				case 'inform':
					break;
				
				case 'GoodChoice':
					uni.navigateTo({
						url: '/pages/GoodChoice/GoodChoice'
					})
					break;
				
			}
		}
	}
};
</script>

<style scoped lang="scss">
@import 'home.scss';
</style>
